import h from "./dom/h";
import patch from './dom/patch';

let container = document.getElementById('container');
let vnode1 = h('h1', {}, 'halo');

const vnode2 = h('ul', {}, [
  h('li', {key: 'a'}, 'a'),
  h('li', {key: 'b'}, 'b'),
  h('li', {key: 'c'}, 'c'),
]);
const vnode3 = h('div', {}, '这是一个div');
const vnode4 = h('div', {}, [
  h('li', {key: 'a'}, 'a'),
  h('li', {key: 'b'}, 'b'),
  h('li', {key: 'c'}, 'c'),
]);
const vnode5 = h('div', {}, [
  h('li', {key: 'b'}, 'b'),
  h('li', {key: 'c'}, 'c'),
  h('li', {key: 'a'}, 'a'),
]);
const btn = document.getElementById('btn');

/**
 * 核心
 */
// 旧前与新后
let core_oldNode1 = h('ul', {}, [
  h('li', {key: 'a'}, 'a'),
  h('li', {key: 'b'}, 'b'),
  h('li', {key: 'c'}, 'c'),
  h('li', {key: 'd'}, 'd'),
]);
let core_newNode1 = h('ul', {}, [
  h('li', {key: 'd'}, 'd'),
  h('li', {key: 'c'}, 'c'),
  h('li', {key: 'b'}, 'b'),
  h('li', {key: 'a'}, 'a'),
]);

// 第五种情况
let core_oldNode5 = h('ul', {}, [
  h('li', {key: 'a'}, 'a'),
  h('li', {key: 'b'}, 'b'),
  h('li', {key: 'c'}, 'c'),
  h('li', {key: 'd'}, 'd'),
  h('li', {key: 'e'}, 'e'),
]);
let core_newNode5 = h('ul', {}, [
  h('li', {key: 'c'}, 'c'),
  h('li', {key: 'b'}, 'b'),
  h('li', {key: 'e'}, 'e'),
  h('li', {key: 'a'}, 'a'),
  h('li', {key: 'd'}, 'd'),
]);

// 删除情况
let core_old_delete = h('ul', {}, [
  h('li', {key: 'a'}, 'a'),
  h('li', {key: 'b'}, 'b'),
  h('li', {key: 'c'}, 'c'),
  h('li', {key: 'd'}, 'd')
]);
let core_new_delete = h('ul', {}, [
  h('li', {key: 'a'}, 'a'),
  h('li', {key: 'b'}, 'b'),
  h('li', {key: 'c'}, 'c'),
]);
patch(container, core_old_delete);
console.log("core_oldNode1", core_oldNode1);
btn.onclick = function () {
  // patch(container, vnode4);
  patch(core_old_delete, core_new_delete);
}